/**
 * @copyright SilverBiology, LLC
 * @website http://www.silverbiology.com
*/

Ext.namespace('Gbif.Glossary')

Gbif.Glossary.TermsPanel = function(config){
		
	this.termsStore = new Ext.data.JsonStore({
			url: 'api/api.php'
		, root: 'records'
		, totalProperty: 'totalCount'
		, baseParams: {
					cmd: 'definition'
				,	type:''
				,	value:''
			}
		,	fields: ['term','definitions', 'definitionCount', 'related', 'relatedCount', 'refLink', 'termID','calues','codeAbbrivation','codeStatus','code','termStatus', 'mainRefLink', 'sequence']
		,	listeners: {
				load: {
						scope: this
					,	fn: this.setScrollId
					,	delay: 500
				}
			}
	});

/*
	var extra = '<div style="padding-top: 5px">'
		+	'<a href="#" gg:type="links" lFlag=false ><img class="refArrowClosed" src=""></a><span class="linkTxt">Show Main Links</span>'
		+	'<div class="refLinksWrapper">'
		+		'<div class="refLink"><img src="resources/images/icons/html_file.png">' + config.mainRefLink + '</div>'
		+		'<div class="refLink"><a class="exi" href="' + config.mainRefLink + '/skos" target="_blank"><img src="resources/images/icons/xml_file.png">' + config.mainRefLink + '/skos</a></div>'
		+	'<div class="refLink"><a class="exi" href="' + config.mainRefLink + '/json" target="_blank"><img src="resources/images/icons/json_file.png">' + config.mainRefLink + '/json</a></div>'
		+ '</div>';
*/
	var extra = '<div class="refLink">uri: ' + config.mainRefLink + '</div>';
	
	if (config.mainRefLink == "hide") {
		extra = "";
	}
	
	this.termsTpl = new Ext.XTemplate(
		'<div class="terms">' + extra,
		'<tpl for=".">',
			'<div class="termRow" id="termRow">',
			'<div id="terms-{term}"><div style="margin-bottom: 5px"><b>{term}',
				'<tpl if="relatedCount &gt;= 1">',
					' (Alternative terms: <i>',
					'<tpl for="related">',
						' {term}',
						'<tpl if="xindex != xcount">,</tpl>',
					'</tpl>',
					'</i>)',
				'</tpl>',
				'</b></div>',
				'<tpl if="definitionCount &gt; 1">',
					'<tpl for="definitions">',
						'<div class="definition">',
						'<p>{#}. {def}</p>',
						'<tpl if="code != null && code != \'\'">',
							'{code}</tpl>',
						'<div class="refLink">uri: {parent.refLink}/{sequence}</div>',
						'</div>',
					'</tpl>',
				'</tpl>',
				'<tpl if="definitionCount == 1">',
					'<tpl for="definitions">',
						'<div class="definition">',
						'<p>{def}</p>',
						'<tpl if="code != null && code != \'\'">',
							'{code}</tpl>',
						'<tpl if="codeStatus != null && codeStatus != \'\'">',
							' <span class="codeStatus">{codeStatus}</span></tpl>',
						'<div class="refLink">uri: {parent.refLink}/{sequence}</div>',
						'</div>',
					'</tpl>',
				'</tpl>',
/*				
				'<div style="padding-top: 5px">',
					'<a href="#" gg:type="links" lFlag=false ><img class="refArrowClosed" src=""></a><span class="linkTxt">Show Links</span>',
					'<div class="refLinksWrapper">',
						'<div class="refLink"><img src="resources/images/icons/html_file.png">{refLink}</div>',
						'<div class="refLink"><a class="exi" href="{refLink}/skos" target="_blank"><img src="resources/images/icons/xml_file.png">{refLink}/skos</a></div>',
						'<div class="refLink"><a class="exi" href="{refLink}/json" target="_blank"><img src="resources/images/icons/json_file.png">{refLink}/json</a></div>',
					'</div>',
				'</div>',
*/				
			'</div>',
			'</div>',
		'</tpl>',
		'</div>'
	);

	this.termsView = new Ext.DataView({
			autoHeight: true
		,	store: this.termsStore
		,	tpl: this.termsTpl	
		,	loadingText: 'Loading...' 	
		,	overClass: '' 
		,	itemSelector: 'div.termsresult'				
	});
	
	Ext.apply(this,config,{
			closable: true 
		,	autoDestroy: true				
		,	autoScroll: true
		,	termID: ''
		,	items: [ this.termsView ]
	});

	Gbif.Glossary.TermsPanel.superclass.constructor.call(this,config)

}

Ext.extend( Gbif.Glossary.TermsPanel , Ext.Panel, {

		initEvents : function(){
			this.body.on('click', this.onClick, this);
		} 		

	,	onClick: function(e, target){
			if (target = e.getTarget('a:not(.exi)', 3)) {
				e.stopEvent();
				var type = Ext.fly(target).getAttributeNS('gg', 'type');
				if (type == 'links') {
					if ( Ext.fly(target).getAttribute('lFlag') == 'false' ) {
						Ext.fly(target).set({lFlag: true});
						Ext.fly(target).child('img').addClass('refArrowOpen');
						Ext.fly(target).next('span').update('Hide Links');
						Ext.fly(target).next('div').setHeight(105, { duration : .5 });
					} else {
						Ext.fly(target).set({lFlag: false});
						Ext.fly(target).child('img').removeClass('refArrowOpen');
						Ext.fly(target).next('span').update('Show Links');
						Ext.fly(target).next('div').setHeight(0, { duration : .5 });
					}
					Ext.fly(target).blur();
				} else {					
					var title = Ext.fly(target).getAttributeNS('gg', 'title');
					var letter = Ext.fly(target).getAttributeNS('gg', 'letter');
					var icon = Ext.fly(target).getAttributeNS('gg', 'icon');
					var id = Ext.fly(target).getAttributeNS('gg', 'id');
					this.fireEvent('newTabAdd',type,title,letter,icon, id);
				}
			}
 		}
		
	,	scrollToTerm: function(id){

			var el = Ext.getDom('terms-' + id);
			if (el) {
				var top = (Ext.fly(el).getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop;
				this.body.scrollTo('top', top - 25, {
					duration: 0.5,
					callback: function(){
						Ext.fly(el).parent().pause(0.0).highlight('#AAFFA8', {attr:'background-color', endColor: '#F3F3F3'});											
					}
				});
			}
		}
		
	,	setScrollId: function(){
			this.scrollToTerm(this.term);
		}

});